<template>
    <page-container
        ref="popupRef"
        :show="modelValue"
        close-on-slide-down
        custom-style="background: none;"
        @afterleave="onPopupAfterLeave"
        @clickoverlay="onClickOverlay"
    >
        <view :class="[ns.b(), systemStore.safeAreaBottomClass]">
            <view class="popup-content">
                <slot />
            </view>
        </view>
    </page-container>
</template>

<script setup lang="ts">
import { useSystemStore } from "@/store";
import { useNamespace } from "@/hooks";

const ns = useNamespace("popup");

const modelValue = defineModel({
    type: Boolean,
    default: false
});
/**
 * 定义组件的事件发射器
 * @param {string} change - 当弹窗状态改变时触发
 */
const emits = defineEmits(["change", "clickoverlay", "afterleave"]);

const popupRef = ref();

// 使用系统状态管理
const systemStore = useSystemStore();

/**
 * 处理弹窗状态变化事件，同步更新modelValue值
 */
const onPopupAfterLeave = () => {
    emits("afterleave");
    modelValue.value = false;
};

const onClickOverlay = () => {
    emits("clickoverlay", false);
    modelValue.value = false;
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
